<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page import="com.lp.cfg.ProConfig" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html lang="en">

<head>
    <%@ include file="/WEB-INF/oss/iot/common/variable.jsp" %>
    <%@ include file="/WEB-INF/oss/iot/common/resource_lib.jsp" %>
    <script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/jquery/jquery-1.9.1.min.js"></script>
    <%@ include file="/WEB-INF/oss/iot/common/variable_js.jsp" %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .middenboox tbody tr:hover {
            background: rgba(250, 250, 250, 0.2);
            cursor: pointer;
        }

        .activeOntbody {
            background: rgba(250, 250, 250, 0.2);
        }
    </style>
    <link type="text/css" href="<%=basePath%>/lib/bigscreen/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="<%=basePath%>/lib/bigscreen/lib/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="<%=basePath%>/lib/bigscreen/css/style.css">

    <script type="text/javascript" src="<%=basePath%>/lib/lpro/ljc_0.2.js?<%=v%>"></script>

    <link type="text/css" href="<%=basePath%>/lib/iview/dist/styles/iview.css" rel="stylesheet"/>
    <!-- 引入elment组件库 -->
    <link rel="stylesheet" href="<%=basePath%>/lib/element-ui/index.css">
</head>

<body>
<div id="app">
    <div class="bigBox">
        <header class="top"><span v-text="atitle"></span>
            <p v-text="currentdate">-年-月-日-:-:-</p>
        </header>
        <article>
            <div class="leftOneBoxa">
                <div class="rigTitle rigTitleOnline">
                    <img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
                    <span>设备在线状态</span>
                </div>
                <div class="leftOneBox" id="leftOneBox"></div>

                <div class="leftOneBoxnum" style="font-size: 18px;" v-text="this.counta"></div>
            </div>
            <div class="leftTwoBox">
                <div class="rigTitle">
                    <img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
                    <span>视频摄像头轮播</span>
                </div>
                <div class="rigLine">
                    <img src="<%=basePath%>/lib/bigscreen/image/line.png">
                </div>
                <div style="width:98%;height:80%;margin-left: 2%;" id="leftTwoBox">
					<video id="myPlayer" style="width:100%;height:98%;" poster="" controls playsInline webkit-playsinline autoplay>
						<source src="" type="rtmp/flv" />
					</video>
                </div>
                
                <div class="hide template0">
                	<video id="myPlayer" style="width:98%;height:98%;" poster="" controls playsInline webkit-playsinline autoplay>
						<source src="" type="rtmp/flv" />
					</video>
                </div>
                
            </div>
            <div class="leftThreeBox" id="leftThreeBox">
                <div class="rigTitle">
                    <img src="<%=basePath%>/lib/bigscreen/image/leftThree_icon.png">
                    <span>设备实时数据</span>
                </div>
                <div class="rigLine">
                    <img src="<%=basePath%>/lib/bigscreen/image/line.png">
                </div>
                <div class="middenBottomBoxChil" style="width: 100%;right: 0;left:2px" id="middenBottomBoxChil">
					                	
                </div>
            </div>
            <div class="template2 hide">
				<div class="map_info_window" style="color: #aaa;padding:0 10px 10px 10px;overflow: auto; ">
					<div class="map_info_titles" style="margin-bottom: 5px;font-size: 16px;"> 
						<span style="vertical-align: middle;">设备名称：{0}</span>
						<br>
					</div>  
					<div class="map_info_item" style="overflow: hidden;zoom:1;">
						{1}								
					</div> 
				</div>
			</div>
			<div class="template3 hide">
				<div style="" class="sensorStyle">
					<div style="">
						<span class="sensor-info">{0}</span>
					</div>
					<div style="">
						<span style="font-size: 17px;color: #3499da;">{1}</span>
						<span>{2}</span>
					</div>
				</div>
			</div>
            <div class="middenTopBox" id="middenTopBox">
            	
            </div>
            <div class="middenBottomBox" id="middenBottomBox">
                <div class="middenboox" style="width: 90%;">
                    <div class="middenTitle">
                        <img src="<%=basePath%>/lib/bigscreen/image/bottomTable.png">
                        <span>监控列表</span>
                        <span style="margin-left: 5%;cursor: pointer;" @click="showAllscene">全部项目</span>
                    </div>
                    <div class="boxChilden">
                        <table>
                            <thead>
                            <tr>
                                <th width="30%">项目名</th>
                                <th width="13%">设备数</th>
                                <th width="13%">传感器数</th>
                                <th width="13%">未读报警数</th>
                                <th width="25%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr @click="middenboox(item,index)" :class="{activeOntbody:index==current}"
                                :id="'tableItemsa'+index" v-for="(item, index) in tableItemsb">
                                <th v-text="item.name"></th>
                                <th v-text="item.nodeCount"></th>
                                <th v-text="item.sensorCount"></th>
                                <th v-text="item.alarmCount"></th>
                                <th>
                                    <button class="alesm"
                                            style="background: #FF0000;width: 80px;height: 20px;font-size: 12px;color: #eee;line-height: 0px;border-radius: 3px;outline: none;border: 0px;font-weight: 200;"
                                            @click="loadWarning(item)">未处理报警记录
                                    </button>
                                    <button class="histo"
                                            style="background: #2897C4;width: 80px;height: 20px;font-size: 12px;color: #eee;line-height: 0px;border-radius: 3px;outline: none;border: 0px;font-weight: 200;"
                                            @click="loadHistory(item)">历史数据
                                    </button>
                                </th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="rightOneBoxa">
                <div class="rigTitle rigTitleOnline">
                    <img src="<%=basePath%>/lib/bigscreen/image/leftTwo_icon.png">
                    <span>设备报警处理状态</span>
                </div>
                <div class="rightOneBox" id="rightOneBox"></div>
                <div class="rightOneBoxnum" v-text="this.bjcont"></div>
            </div>

            <div class="rightTwoBox" id="rightTwoBox">
                <div class="rigTitle">
                    <img src="<%=basePath%>/lib/bigscreen/image/aleram.png">
                    <span>报警记录</span>
                </div>
                <div class="rigLine">
                    <img src="<%=basePath%>/lib/bigscreen/image/line.png">
                </div>
                <div v-if="aleamItems==null||aleamItems.length<=0" class="myCarousela">暂无数据</div>
                <div v-else class="ybox">
                    <ul>
                        <li v-for="(item, index) in aleamItems" v-text="item.value"></li>
                    </ul>
                </div>

            </div>
            <div class="rightThreeBox">
                <div class="rigTitle">
                    <img src="<%=basePath%>/lib/bigscreen/image/rightThree_icon.png">
                    <span>数据统计</span>
                </div>
                <div class="rigLine">
                    <img src="<%=basePath%>/lib/bigscreen/image/line.png">
                </div>
                <div style="width:100%;height:100%;" id="rightThreeBox"></div>
            </div>
        </article>
    </div>


    <!-- 报警记录 -->
    <Modal width="1100" v-model="showWarning" draggable scrollable title="报警记录">
        <div style="margin-bottom: 10px">
            <i-select v-model="warningLevel" style="width:200px">
                <i-option :value="0">全部</i-option>
                <i-option v-for="item in levelList" :value="item.code" :key="item.code">{{ item.name }}</i-option>
            </i-select>
            <el-date-picker
                    v-model="warningTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="top:2px"
                    type="datetimerange"
                    size="small"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <i-button type="primary" @click="searchWarning">查询</i-button>
        </div>
        <el-table
                :data="warningList"
                border
                height="427"
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    align="center"
                    label="报警名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="sensor_name"
                    label="报警传感器"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="报警数值 / 报警阀值"
                    align="center"
                    width="150">
                <template slot-scope="scope">
                    {{scope.row.sdata}}/{{scope.row.alarm_sdata}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="报警详情">
            </el-table-column>

            <el-table-column
                    prop="data.iot_trigger_alarm_level"
                    width="80"
                    align="center"
                    label="报警级别">
            </el-table-column>

            <el-table-column
                    prop="data.iot_alarm_process_status"
                    width="80"
                    align="center"
                    label="处理标志">
            </el-table-column>

            <el-table-column
                    prop="atimestr"
                    width="100"
                    align="center"
                    label="时间">
            </el-table-column>
        </el-table>
        <div slot="footer">
            <Page v-if="warningCount>0" transfer @on-change="warningPageChange"
                  @on-page-size-change="warningSizeChange"
                  :current="warningPaged"
                  :page-size="warningPageSize"
                  prev-text="上一页"
                  next-text="下一页" :total="warningCount" size="small" show-elevator show-total show-sizer/>
        </div>
    </Modal>

    <!-- 历史数据 -->
    <Modal width="700" v-model="showHistory" draggable scrollable title="历史数据">

        <div style="margin-bottom: 10px">
            <i-select v-model="historyQuery.sensor_id" placeholder="请选择传感点" style="width:200px">
                <i-option :value="''">全部</i-option>
                <i-option v-for="item in nodeSensor" :value="item.id" :key="item.id">{{item.name}}</i-option>
            </i-select>
            <el-date-picker
                    v-model="historyTime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="top:2px"
                    type="datetimerange"
                    size="small"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <i-button type="primary" @click="searchHistory">查询</i-button>
        </div>

        <el-table
                :data="historyList"
                border
                height="397"
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="sensor_name"
                    label="传感器"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="data.iot_sensor_type"
                    label="类型"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="sdata"
                    width="150"
                    label="数值">
            </el-table-column>
            <el-table-column
                    prop="atimestr"
                    width="150"
                    align="center"
                    label="时间">
            </el-table-column>
        </el-table>
        <div slot="footer">
            <Page v-if="historyCount>0" transfer @on-change="historyPageChange"
                  @on-page-size-change="historySizeChange"
                  :current="historyPaged"
                  :page-size="historyPageSize"
                  prev-text="上一页"
                  next-text="下一页" :total="historyCount" size="small" show-elevator show-total show-sizer/>
        </div>
    </Modal>

    <!-- 预过保和已过保设备数据 -->
    <Modal width="900" v-model="showGuarantee" draggable scrollable :title="guaranteeTitle">
        <el-table
                :data="guaranteeList"
                border
                height="397"
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="manager"
                    label="设备主管"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="manager_phone"
                    label="联系方式"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="pic"
                    label="负责人"
                    align="center"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="pic_phone"
                    label="联系方式"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="install_time"
                    label="安装时间"
                    align="center"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="maintenance_time"
                    align="center"
                    width="150"
                    label="维保时间">
            </el-table-column>
        </el-table>
    </Modal>

</div>
</body>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/echarts/echarts.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/lib/newscrool.js"></script> <!-- 此处引用的为上面的插件实现代码 -->
<script type="text/javascript" src="<%=basePath%>/lib/bigscreen/js/vue.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/iview/dist/iview.min.js" charset="UTF-8"></script>
<script src="<%=basePath%>/lib/element-ui/index.js"></script>
<script src="https://open.ys7.com/sdk/js/1.3/ezuikit.js"></script>
<script src="<%=basePath%>/lib/bigscreen/js/index.js"></script>
<script>

	var videoCache = "" ;
	var sensorCache = "" ;
	var vindex = 0 ;
	var sindex = 0 ;
	var player ;

	$(function(){
		
		// 切换摄像头显示
		function changev(){
			vindex ++ ;
			if( videoCache!= null && videoCache != '' && videoCache.length>0   ){
				if(vindex >= videoCache.length  ){
					vindex = 0;
				}
				if(videoCache.length == 1){
					return ;
				}
				$("#leftTwoBox").empty();
				$("#leftTwoBox").append( $(".template0").html());
				$("#myPlayer").attr("src",videoCache[vindex].rtmp_url_common);
				player = new EZUIPlayer('myPlayer');
			}
		}
		
		// 90s 切换一次视频
		setInterval( function() {
			changev();
		}, 90*1000);
		
		
		// 5s 切换传感器数据
		setInterval( function() {
			sindex++ ;
			if( sensorCache!= null && sensorCache != '' && sensorCache.length>0  ){
				if(sindex >= sensorCache.length){
					if(sindex==1){
						return ;
					}
					sindex=0;
				}
				$("#middenBottomBoxChil").empty();
				var sContent = $(".template2").html().format(sensorCache[sindex].name , generateSensor(sensorCache[sindex].iotSensorList  )  );
				$("#middenBottomBoxChil").append( sContent ) ;
			}
		}, 5*1000);
		
		$(".map_info_window").height( $("#middenBottomBoxChil").height() -10 );
		
		// 立即更新
		getSensorData({});
		getVideos({});
		
// 		setInterval(function() {
// 			// 定时更新数值
// 			getSensorData({});
// 		}, 10*60*1000);
		
// 		setInterval(function() {
// 			// 定时更新数值
// 			getVideos({}); 
// 		}, 10*60*1000);
		
	})

	// 请求摄像头信息
	function getVideos(data){
		// 请求摄像头的数据
		postAjax(localUrl+'/page/video.json?pageSize=30&paged=1',
				data,
				function(data){
					if(isOK(data)){
						var dataT = data.data.data ;
						$("#leftTwoBox").empty();
						$("#leftTwoBox").append( $(".template0").html());
						$("#myPlayer").attr("src",dataT[0].rtmp_url_common);
						player = new EZUIPlayer('myPlayer');
						videoCache = dataT ;
						vindex = 0 ;
					}else{
						player.pause();
					}
				}
		);
	}
	
	// 请求传感器数据
	function getSensorData(data){
		// 实时数据
		postAjax(localUrl+'/page/node/sensor/lists?paged=1&pageSize=30',
			data,
			function(data){
				if(isOK(data)){
					var dataT = data.data.data ;
					sensorCache = dataT ;
					sindex = 0 ;
					$("#middenBottomBoxChil").empty();
					var sContent = $(".template2").html().format(dataT[0].name , generateSensor(dataT[0].iotSensorList  )  );
					$("#middenBottomBoxChil").append( sContent ) ;
				}else{
					$("#middenBottomBoxChil").empty();
				}
			}
		);
	}
	
	function generateSensor(data){
		var s = '' ;
		var dataT = data ;
		for(var i=0;i<dataT.length;i++){
			if( dataT[i].iot_sensor_type == 25 ){
				s += $(".template3").html().format(dataT[i].name , gdv(dataT[i].sdata,0) ,dataT[i].data.measure_unit_type );
			}else if( dataT[i].iot_sensor_type == 26 || dataT[i].iot_sensor_type == 27  ){
				s += $(".template3").html().format(dataT[i].name ,gdv(dataT[i].data.measure_unit_type,'-') ,"" );
			}
		}
		return s ;
	}
	
	// 10s刷新报警等信息
	setInterval(function() {
		 vm.drawOfflineItems();
         vm.shebeiItems();
	}, 15* 1000 );
	
	// 30min 一次页面
	setTimeout(function(){
		window.location.reload();
	}, 30 * 60 * 1000);
	
    var myChartMap = null
    var vm= new Vue({
        el: '#app',
        data: function () {
            return {
                current: null,
                cityName: "",
                currentdate: '',
                atitle: '中控管理平台数据统计',
                echarts: echarts,
                myCarousela: false,//
                myCarouselb: false,//
                begintime: '',//开始时间
                begintimea: '',//开始时间
                endtime: '',//结束时间
                endtimea: '',//结束时间
                sceneid: null,//项目ID
                cont: 0,//总数
                bjcont: 0,//报警总数
                seildcont: 0,//项目总数
                indexLun: 0,//
                numa: 0,//
                numberr: 0,//
                counta: 0,//在线离线总数
                noOnline: 0,//不在线
                yesOnline: 0,//在线
                yinume: 0,//已处理
                weinume: 0,//未处理
                yibannume: 0,//一般报警
                yanzhongnume: 0,//严重报警
                jinjinume: 0,//紧急报警
                chuliAleam: [],//已处理未处理数组
                dengAleam: [],//报警等级数组
                aleamItems: [],//报警记录
                aleamLineItems: [],//在线离线
                leftThreeBoxa: [],//轮播
                shujuTjX: [],//数据统计x轴
                shujuTjY: [],//y轴
                sensorCount: [],//历史数据
                triggerCount: [],//触发数据
                alarmCounta: [],//
                shealarmCounta: [],//
                sensorCounta: [],//
                maoNames: [],//
                numbera: 0,//
                listIteams: {name: [], value: []},//轮播
                geoCoordMapa: {},
                tableItems: [],
                tableItemsb: [],
                showWarning: false,//是否显示设备报警
                warningQuery: {//报警查询条件
                },
                warningTime: [],//报警查询时间范围
                warningPaged: 1,//报警当前页
                warningPageSize: 10,//报警每页条数
                warningSensorid: 0,//选择的报警传感点
                warningLevel: 0,//选择的报警等级
                warningList: [],//报警列表
                warningCount: 0,//报警总数
                levelList: [],//报警级别
                showHistory: false,//是否显示历史数据
                historyList: [],//历史数据
                historyCount: 0,//历史总数
                historyQuery: {//历史查询条件
                },
                historyPaged: 1,//历史当前页
                historyPageSize: 10,//历史每页条数
                nodeSensor: [],//设备传感点
                historyTime: [],//历史查询时间范围
                nodeOver:null,//设备过保
                nodePre:null,//预设备过保
                guaranteeTitle:null,//过保标题
                showGuarantee:false,//是否显示过保数据
                guaranteeList:[]//过保数据
            }

        },
        methods: {
            //查询报警
            searchWarning: function () {
                this.warningPaged = 1
                this.getWarning()
            },
            //获取报警数据
            getWarning: function () {
                var that = this
                if (that.warningSensorid == 0) {
                    that.warningQuery.sensor_id = null
                } else {
                    that.warningQuery.sensor_id = that.warningSensorid
                }
                if (that.warningLevel == 0) {
                    that.warningQuery.iot_trigger_alarm_level = null
                } else {
                    that.warningQuery.iot_trigger_alarm_level = that.warningLevel
                }
                if (that.warningTime != null && that.warningTime.length > 0) {
                    that.warningQuery.start_time = that.warningTime[0]
                    that.warningQuery.end_time = that.warningTime[1]
                } else {
                    delete that.warningQuery.start_time
                    delete that.warningQuery.end_time
                }
                var loading = layer.msg('正在加载，请稍后...', {icon: 16, time: false, shade: 0.1})
                commonAjax("POST", localUrl + "/page/alarm?paged=" + that.warningPaged + '&pageSize=' + that.warningPageSize, that.warningQuery, function (res) {
                    layer.close(loading)
                    if (res.data == null) {
                        that.warningList = []
                        that.warningCount = 0
                    } else {
                        that.warningList = res.data.data
                        that.warningCount = res.data.totalCount
                    }
                    that.showWarning = true;
                });
            },
            // 报警第几页
            warningPageChange: function (val) {
                this.warningPaged = val
                this.getWarning()
            },
            // 报警每页显示条数
            warningSizeChange: function (val) {
                this.warningPageSize = val
                this.warningPaged = 1
                this.getWarning()
            },
            //获取级别
            getLeve: function () {
                var that = this
                getAjax(localUrl + "/get-dictionary?p_code=" + 38, function (res) {
                        that.levelList = res.data
                    }
                )
            },
            //获取历史数据
            getHistory: function () {
                var that = this ;
                if (that.historyTime != null && that.historyTime.length > 0) {
                    that.historyQuery.start_time = that.historyTime[0]
                    that.historyQuery.end_time = that.historyTime[1]

                    if (!DateUtil.compare(that.historyQuery.start_time, that.historyQuery.end_time, 30 * 24 * 60 * 60 * 1000)) {
                        layer.msg("查询时间不能超过一个月！")
                        return false
                    }
                } else {
                    layer.msg("请选择查询时间！")
                    return false
                }
                var loading = layer.msg('正在加载，请稍后...', {icon: 16, time: false, shade: 0.1})
                commonAjax("POST", localUrl + "/page/sensor/history?paged=" + that.historyPaged + '&pageSize=' + that.historyPageSize, that.historyQuery, function (res) {
                    layer.close(loading)
                    if (res.data == null) {
                        that.historyList = []
                        that.historyCount = 0
                    } else {
                        that.historyList = res.data.data
                        that.historyCount = res.data.totalCount
                    }
                    that.showHistory = true
                });
            },
            searchHistory: function () {
                this.historyPaged = 1
                this.getHistory()
            },
            // 历史第几页
            historyPageChange: function (val) {
                this.historyPaged = val
                this.getHistory()
            },
            // 历史每页显示条数
            historySizeChange: function (val) {
                this.historyPageSize = val
                this.historyPaged = 1
                this.getHistory()
            },
            //获取设备传感点
            getNodeSensor: function (id) {
                var that = this
                postAjax(localUrl + "/page/sensor.json?pageSize=10000&paged=1",
                    {scene_id: id},
                    function (res) {
                        if (res.data != null && res.data.data != null) {
                            that.nodeSensor = res.data.data
                        }
                    }
                )
            },
            //离线在线
            drawOffline: function (data, num) {
                var that = this
                var echarts = that.echarts
                var myChart = echarts.init(document.getElementById('leftOneBox'))
                myChart.setOption({
                    color: ["#2D73FF", "#C23531",],
                    title: {
                        text: '设备总数',
                        //subtext: num,
                        textStyle: {
                            color: '#eee',
                            fontSize: 14,
                            lineHeight: 20,
                            //   align: 'center'
                        },
                        subtextStyle: {
                            fontSize: 14,
                            lineHeight: 20,
                            color: ['#ff9d19']
                        },
                        x: '33%',
                        y: '43%',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    grid: {
                        bottom: 150,
                        left: 100,
                        right: '10%'
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        top: "15%",
                        right: "5%",
                        textStyle: {
                            color: '#eee',
                            fontSize: 14,

                        },
                        icon: 'roundRect',
                        data: data,
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['55%', '70%'],
                            center: ['42%', '58%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: "{b}:{c}",
                                    textStyle: {
                                        fontSize: 14,

                                    },
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 7,
                                    length2: 7
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            name: "",
                            data: data,

                        },
                        // 边框的设置
                        {
                            radius: ['55%', '45%'],
                            center: ['42%', '58%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 10,
                                itemStyle: {
                                    color: "rgba(250,250,250,0.3)",
                                },
                            }],
                        }
                    ]
                });

            },
            //报警处理
            drawAlerm: function (data, num) {
                var that = this
                var echarts = that.echarts
                var myChart = echarts.init(document.getElementById('rightOneBox'))
                myChart.setOption({
                    color: ["#2D73FF", "#C23531",],
                    title: {
                        text: '报警总数',
                        textStyle: {
                            color: '#eee',
                            fontSize: 14,
                            //   align: 'center'
                        },
                        subtextStyle: {
                            fontSize: 14,
                            color: ['#ff9d19']
                        },
                        x: '37%',
                        y: '43%',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}"
                    },
                    grid: {
                        bottom: 150,
                        left: 100,
                        right: '10%'
                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        top: "15%",
                        right: "5%",
                        textStyle: {
                            color: '#eee',
                            fontSize: 14,

                        },
                        icon: 'roundRect',
                        data: data,
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['55%', '70%'],
                            center: ['46%', '58%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: "{b}:{c}",
                                    textStyle: {
                                        fontSize: 14,

                                    },
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 3,
                                    length2: 5
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            name: "",
                            data: data,

                        },
                        // 边框的设置
                        {
                            radius: ['55%', '45%'],
                            center: ['46%', '58%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 10,
                                itemStyle: {
                                    color: "rgba(250,250,250,0.3)",
                                },
                            }],
                        }
                    ]
                });
            },
            // 视频轮播
            startVideo: function(data){
            	alert(data.data.length);
            	console.log(data);
            },
            //过保数
            drawAlermNum: function (data) {
                var that = this
                var echarts = that.echarts
                var myChart = echarts.init(document.getElementById('leftTwoBox'))


                var option = {
                    color: ['#FF8352', '#E271DE'],
                    backgroundColor: '#012A5C',
                    height: 100,
                    grid: {
                        bottom: 150,
                        left: 100,
                        right: '10%'
                    },
                    legend: {
                        orient: 'vertical',
                        left: "5%",
                        bottom: '5%',
                        textStyle: {
                            color: '#f2f2f2',
                            fontSize: 14,

                        },
                        icon: 'roundRect',
                        data: ['已经过保', '过保预警'],
                    },
                    tooltip: {
                        formatter: "{a}：<br/>{b}: {c}"
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['30%', '61%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: true,
                                    formatter: "{c}",
                                    textStyle: {
                                        fontSize: 14,

                                    },
                                    position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            name: "过保情况",
                            data: data,

                        },
                        // 边框的设置
                        {
                            radius: ['30%', '34%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 1,
                                itemStyle: {
                                    color: "rgba(250,250,250,0.3)",
                                },
                            }],
                        }, {
                            name: '外边框',
                            type: 'pie',
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            center: ['50%', '50%'],
                            radius: ['65%', '65%'],
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: 9,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        borderWidth: 2,
                                        borderColor: '#0b5263'
                                    }
                                }
                            }]
                        },
                    ]
                };
                myChart.on('click', function (params) {
                    //TODO
                    that.guaranteeTitle = params.name
                    if (params.name == '已经过保') {
                        that.guaranteeList = that.nodeOver
                    } else {
                        that.guaranteeList = that.nodePre
                    }
                    that.showGuarantee = true
                });
                myChart.setOption(option);


            },
            //数据统计
            drawStatisticsa: function (datax, sensorCount, triggerCount) {
                var that = this
                var echarts = that.echarts
                var myChart = echarts.init(document.getElementById('rightThreeBox'))
                myChart.setOption({
                    // backgroundColor: '#00265f',
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    legend: {
                        data: ["历史数据", "触发历史"],
                        align: "right",
                        top: "4%",
                        right: "6%",
                        textStyle: {
                            color: "#fff"
                        },
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 35
                    },
                    grid: {
                        left: "5%",
                        right: "6%",
                        bottom: "20%",
                        top: "15%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: datax,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#063374",
                                    width: 1,
                                    type: "solid"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#00c7ff"
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            interval: 1,
                            axisLabel: {
                                formatter: "{value}"
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#00c7ff",
                                    width: 1,
                                    type: "solid"
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#063374"
                                }
                            }
                        }
                    ],
                    series: [

                        {
                            name: "历史数据",
                            type: "bar",
                            data: sensorCount,
                            barWidth: 8,
                            // barGap: 1,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#00da9c"
                                        },
                                        {
                                            offset: 1,
                                            color: "#007a55"
                                        }
                                    ]),
                                    opacity: 1
                                }
                            }
                        },
                        {
                            name: "触发历史",
                            type: "bar",
                            data: triggerCount,
                            barWidth: 8,
                            // barGap: 1,
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#c4e300"
                                        },
                                        {
                                            offset: 1,
                                            color: "#728400"
                                        }
                                    ]),
                                    opacity: 1
                                }
                            }
                        }
                    ]
                });

            },
            drawStatistics: function (datax, sensorCount, triggerCount) {
                var that = this
                var echarts = that.echarts
                var myChart = echarts.init(document.getElementById('rightThreeBox'))
                myChart.setOption({
                    // backgroundColor: '#0f375f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                            label: {
                                show: true,
                                backgroundColor: '#333'
                            }
                        }
                    },
                    legend: {
                        data: ['历史数据', '触发历史'],
                        textStyle: {
                            color: '#ccc'
                        }
                    },
                    grid: {
                        left: "5%",
                        right: "6%",
                        bottom: "20%",
                        top: "15%",
                        containLabel: true
                    },
                    xAxis: {
                        data: datax,
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    yAxis: {
                        splitLine: {show: false},
                        axisLine: {
                            lineStyle: {
                                color: '#ccc'
                            }
                        }
                    },
                    series: [{
                        name: '触发历史',
                        type: 'line',
                        smooth: true,
                        showAllSymbol: true,
                        symbol: 'emptyCircle',
                        symbolSize: 15,
                        data: triggerCount
                    }, {
                        name: '历史数据',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#14c8d4'}
                                    ]
                                )
                            }
                        },
                        data: sensorCount
                    }]
                });

            },
            //地图
            /**
             *
             * @param geoCoo  地图
             * @param list    城市{name:value}
             * @param provArrx  ["省份"]
             */
            drawMap: function (geoCoo, list, provArrx) {
                var that = this;
                myChartMap = echarts.init(document.getElementById('middenTopBox'));
                var geoCoordMap = geoCoo;
                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                option = {
                    title: {
                        text: '设备分布',
                        x: 'center',
                        y: '5%',
                        textStyle: {
                            color: '#eee',

                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (params.name == null || params.name == '') {
                                return '该地区无项目'
                            }
                            var res = params.name + '<br/>';
                            var myseries = option.series;
                            if (convertData) {
                                for (var i = 0; i < that.tableItems.length; i++) {
                                    if (that.tableItems[i].province.indexOf(params.name) >= 0) {
                                        res += that.tableItems[i].name + ' : ' + that.tableItems[i].nodeCount + '</br>';
                                    }
                                }
                            } else {
                                for (var i = 0; i < myseries.length; i++) {
                                    for (var j = 0; j < myseries[i].data.length; j++) {
                                        if (myseries[i].data[j].name == params.name) {
                                            res += myseries[i].name + ' : ' + myseries[i].data[
                                                j].value + '</br>';
                                        }
                                    }
                                }
                            }
                            return res;
                        },

                    },
                    legend: {
                        show: false,
                        orient: 'vertical',
                        left: 'left'
                    },
                    visualMap: {
                        min: 0,
                        max: 30,
                        x: '5%',
                        y: 'bottom',
                        color: ['red', 'orange', 'yellow', 'green'],
                        text: ['高', '低'],
                        calculable: true
                    },
                    series: [
                        {
                            name: '报警数',
                            type: 'map',
                            mapType: 'china',
                            roam: true,
                            label: {
                                normal: {
                                    show: true
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                }
                            },
                            // data:alarmCount,
                            data: list
                        },

                    ]
                };

                myChartMap.setOption(option);
                window.addEventListener("resize", function () {
                    myChartMap.resize();
                });
                var ini_data = [];//初始化省份数组
                var provArr = provArrx;//获取的省份，有可能是从后台获取
                //正则省份，将省与市的字眼去掉，框架不识别
                if (provArrx == undefined) {
                    var provArr = [];
                }
                for (var i = 0; i < provArr.length; i++) {
                    var str = provArr[i];
                    var re = /省|市/g;  //全局匹配
                }
                option.series[0].data = ini_data;//将拼接好的数组赋给参数集合
                // myChart.setOption(option);//跟新图表
                //鼠标滑过事件
                var testStr = ',' + provArr.join(",") + ",";
                myChartMap.on('hover', function (param) {
                    if (testStr.indexOf("," + param.name + ",") != -1) {
                        return false;
                    } else {
                        // param.value=15;
                        myChartMap.setOption(option);
                    }
                });
                //点击事件
                myChartMap.on('click', function (params) {//点击事件
                    // select_province(params.name);
                    if (params.name != null) {
                        var itemsMpa = []
                        for (var i = 0; i < that.tableItems.length; i++) {
                            var re = /省|市/g;  //全局匹配
                            if (that.tableItems[i].province.replace(re, '') == params.name) {
                                itemsMpa.push(that.tableItems[i])
                            }
                        }
                        that.tableItemsb = itemsMpa;
                    }


                });

                //初始化省颜色
                function ini_province() {
                    var ini_len = option.series[0].data.length;
                    for (var i = 0; i < ini_len; i++) {
                        //初始化颜色
                        option.series[0].data[i].value = 5;
                        myChart.setOption(option);
                    }

                }

                //选中省颜色
                function select_province(province_name) {
                    var len = option.series[2].data.length;
                    for (var i = 0; i < len; i++) {
                        if (option.series[2].data[i].name == province_name) {//如果匹配正确
                            //先归零
                            ini_province();
                            //改变颜色
                            // option.series[0].data[i].value=10;
                            myChart.setOption(option);
                        }
                    }
                }

            },

            drawSwiper2: function (data) {
                var lengDtata = [];
                var setiDtata = [];
                if (data != null) {
                    for (var i = 0; i < data.length; i++) {
                        lengDtata.push(data[i].name);
                        setiDtata.push(data[i].value);
                    }
                }

                var that = this;
                var echarts = that.echarts;
                var myChart = echarts.init(document.getElementById("middenBottomBoxChil"));
                myChart.setOption({
                    color: ["#2D73FF"],
                    // backgroundColor: '#00265f',
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "shadow"
                        }
                    },
                    legend: {
                        show: true,
                        data: ["平台用户"],
                        align: "right",
                        top: "5%",
                        right: "6%",
                        textStyle: {
                            color: "#fff"
                        },
                        itemWidth: 10,
                        itemHeight: 10,
                        itemGap: 35
                    },
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "15%",
                        top: "16%",
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: "category",
                            data: lengDtata,
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#063374",
                                    width: 1,
                                    type: "solid"
                                }
                            },
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#00c7ff"
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            interval: 1,
                            axisLabel: {
                                formatter: "{value}"
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#00c7ff",
                                    width: 1,
                                    type: "solid"
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: "#063374"
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: "平台用户",
                            type: "bar",
                            data: setiDtata,
                            barWidth: 15, //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: "#008cff"
                                        },
                                        {
                                            offset: 1,
                                            color: "#005193"
                                        }
                                    ]),
                                    opacity: 1
                                }
                            }
                        }
                    ]
                });
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            },

            //查询用户
            usersItems: function () {
                var that = this;
                postAjax(localUrl + "/user/user-screen",
                    {},
                    function (res) {
                        //that.drawSwiper2(res.data);
                    }
                )
            },
            //查询项目
            middenButtonItems: function (num, namee, nodeCount, gsname, numa) {
                var that = this;
                if (num == undefined) {
                    postAjax(localUrl + "/page/scene-all",
                        {
                            start_time: that.begintime,
                            end_time: that.endtime,
                        },
                        function (res) {
                            that.tableItems = res.data;
                            that.tableItemsb = res.data;
                            that.seildcont = [];
                            that.sceneid = null;
                            that.drawOfflineItems();
                            that.drawOffOutlineItems();
                            that.shebeiItems();
                            that.historyItems();
                            that.mapItems(that.tableItems);
                        }
                    )
                } else {
                    postAjax(localUrl + "/page/scene-all",
                        {
                            start_time: that.begintime,
                            end_time: that.endtime,
                        },
                        function (res) {
                            if (res.data != null) {
                                that.tableItems = res.data;
                                that.seildcont = res.data.length;
                                that.sceneid = num;
                                that.initPage()
                            }

                        }
                    )
                }
            },

            //查询报警
            drawOfflineItems: function () {
                var that = this;
                postAjax(localUrl + "/page/alarm-all",
                    {
                        start_time: that.begintime,
                        end_time: that.endtime,
                        scene_id: that.sceneid
                    },
                    function (res) {
               
                        that.aleamItems=[]
                        that.yinume = 0;
                        that.weinume = 0;
                        var chuliAleama = [];
                        that.dengAleam = [];
                        that.cont = 0;
                        that.bjcont = 0;
                        if (res.data == null  || res.data.length == 0 ) {
                            chuliAleama.push({
                                name: "已处理",
                                value: 0
                            }, {
                                name: "未处理",
                                value: 0
                            })
                            that.bjcont = 0
                            that.chuliAleam = chuliAleama;
                            that.drawAlerm(that.chuliAleam, that.bjcont);
                            
                        } else {
                        	 that.aleamItems = [] ;
                             for (var i = 0; i < res.data.length; i++) {
                                 if (res.data[i].iot_alarm_process_status == "46" || 
                                 		res.data[i].iot_alarm_process_status == "48" ) {
                                     that.yinume++
                                 } else {
                                     that.weinume++
                                 }
                                 that.cont = res.data.length;
                                 if( res.data[i].iot_alarm_process_status == "47" ){
	                                 // 记录报警记录
	                                 that.aleamItems.push({
	                                     value: res.data[i].description
	                                 })
                                 }
                             }
							
                             if(!that.myCarouselb){
                            	 that.myCarouselb = true;
	                             $(".ybox").scroll()
	                             setTimeout(function () {
	                                 $(".ybox").scroll({
	                                     speed: 40,
	                                     direction: "y"
	                                 }); //设置为纵向滚动
	                             }, 500);
                             }

                            that.bjcont = that.yinume + that.weinume
                            chuliAleama.push({
                                name: "已处理",
                                value: that.yinume++
                            }, {
                                name: "未处理",
                                value: that.weinume++
                            })

                            that.chuliAleam = chuliAleama;
                            that.drawAlerm(that.chuliAleam, that.bjcont);
                        }

                    }
                )
            },
            // 视频摄像头
            showVideos: function(){
            },
            //过保
            drawOffOutlineItems: function () {
                var that = this;
                postAjax(localUrl + "/node/guarantee",
                    {
                        start_time: that.begintime,
                        end_time: that.endtime,
                        scene_id: that.sceneid
                    },
                    function (res) {
                        that.jinjinume = 0;
                        that.yibannume = 0;
                        that.dengAleam = [];
                        that.nodePre = res.pre
                        that.nodeOver = res.over
                        if (res.over == null) {
                            that.jinjinume = 0;
                        } else {
                            that.jinjinume = res.over.length;
                        }
                        if (res.pre == null) {
                            that.yibannume = 0;
                        } else {
                            that.yibannume = res.pre.length;
                        }
                        that.dengAleam.push({
                            name: "已经过保",
                            value: that.jinjinume++
                        }, {
                            name: "过保预警",
                            value: that.yibannume++
                        })
//                         that.drawAlermNum(that.dengAleam);
                    }
                )
            },
            //查询设备
            shebeiItems: function () {
                var that = this;
                postAjax(localUrl + "/page/node-all",
                    {
                        scene_id: that.sceneid
                    },
                    function (res) {
                        that.aleamLineItems = [];
                        that.noOnline = 0;
                        that.yesOnline = 0;
                        if (res.data != null) {
                            for (var i = 0; i < res.data.length; i++) {
                                if (res.data[i].data.iot_node_status == "未连接" || res.data[i].data.iot_node_status == "设备已离线") {
                                    that.noOnline++
                                } else {
                                    that.yesOnline++
                                }
                            }
                            that.counta = res.data.length;
                            that.aleamLineItems.push({
                                name: "在线",
                                value: that.yesOnline++
                            }, {
                                name: "离线",
                                value: that.noOnline++
                            })

                            that.drawOffline(that.aleamLineItems, that.counta);
                        } else {
                            that.counta = 0;
                            that.aleamLineItems.push({
                                name: "在线",
                                value: 0
                            }, {
                                name: "离线",
                                value: 0
                            })

                            that.drawOffline(that.aleamLineItems, that.counta);
                        }

                    }
                )
            },
            //查询项目历史数据和触发历史数量
            historyItems: function () {
                var that = this;
                postAjax(localUrl + "/scene/trigger-sensor",
                    {
                        start_time: that.begintimea,
                        end_time: that.endtimea,
                        scene_id: that.sceneid
                    },
                    function (res) {
                        that.shujuTjX = [];
                        that.sensorCount = [];
                        that.triggerCount = [];
                        if (res.data != null) {
                            for (var i = 0; i < res.data.length; i++) {
                                that.shujuTjX.push(res.data[i].name.substring(5, 10));
                                that.sensorCount.push(res.data[i].data.sensorCount);
                                that.triggerCount.push(res.data[i].data.triggerCount);
                            }
                            that.drawStatistics(that.shujuTjX, that.sensorCount, that.triggerCount);
                        }
                    }
                )
            },
            //地图数据
            mapItems: function (nan) {
                var that = this;
                var list = []
                var re = /省|市/g;  //全局匹配
                for (var j = 0; j < that.tableItems.length; j++) {
                    var paramw = {};
                    paramw.name = that.tableItems[j].province.replace(re, '');
                    paramw.value = that.tableItems[j].nodeCount
                    list.push(paramw)
                }
                postAjax(localUrl + "/page/node-map",
                    {
                        start_time: that.begintimea,
                        end_time: that.endtimea,
                        scene_id: that.sceneid
                    },
                    function (res) {
                        var obj = {};
                        that.alarmCounta = []
                        that.shealarmCounta = []
                        that.sensorCounta = []
                        if (res.data != null) {
                            for (var i = 0; i < res.data.length; i++) {
                                obj[res.data[i].name] = [res.data[i].lon, res.data[i].lat],
                                    that.alarmCounta.push({
                                        name: res.data[i].name,
                                        value: res.data[i].alarmCount
                                    });
                                that.shealarmCounta.push({
                                    name: "设备数",
                                    value: ""
                                });
                                that.sensorCounta.push({
                                    name: res.data[i].name,
                                    value: res.data[i].sensorCount
                                });
                                that.maoNames.push({name: res.data[i].name})
                            }
                            that.geoCoordMapa = obj;

                            that.drawMap(that.geoCoordMapa, list, nan);
                        } else {
                            that.geoCoordMapa = {};
                            that.shealarmCounta.push({
                                name: "设备数",
                                value: ""
                            });
                            that.alarmCounta.push({
                                name: "",
                                value: ""
                            });
                            that.sensorCounta.push({
                                name: "",
                                value: ""
                            });
                            that.maoNames.push({name: ""})
                            that.drawMap(that.geoCoordMapa, list, []);
                        }

                    }
                )
            },
            //获取当前时间
            getNowDate: function () {
                var that = this;
                var date = new Date();
                var sign1 = "-";
                var sign2 = ":";
                var year = date.getFullYear() // 年
                var month = date.getMonth() + 1; // 月
                var day = date.getDate(); // 日
                var hour = date.getHours(); // 时
                var minutes = date.getMinutes(); // 分
                var seconds = date.getSeconds() //秒
                var weekArr = ['星期天','星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ];
                var week = weekArr[date.getDay()];
                // 给一位数数据前面加 “0”
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (day >= 0 && day <= 9) {
                    day = "0" + day;
                }
                if (hour >= 0 && hour <= 9) {
                    hour = "0" + hour;
                }
                if (minutes >= 0 && minutes <= 9) {
                    minutes = "0" + minutes;
                }
                if (seconds >= 0 && seconds <= 9) {
                    seconds = "0" + seconds;
                }
                that.currentdate = year + sign1 + month + sign1 + day + " " + hour + sign2 + minutes + sign2 + seconds + " " + week;

            },
            //初始化页面
            initPage: function () {
                var that = this;
                that.drawOfflineItems();
                //that.drawOffOutlineItems();
                // 视频摄像头展示
                //that.showVideos();
                that.shebeiItems();
                that.historyItems();
            },
            // 点击项目
            middenboox: function (items, index) {
                var that = this;
                that.sceneid = items.id;
                that.initPage()
                var list = []
                var re = /省|市/g;  //全局匹配
                list.push({
                    name: items.province.replace(re, ''),
                    value: items.nodeCount
                })
                that.drawMap(that.geoCoordMapa, list, [items.province]);
      			
                getVideos({scene_id:items.id });
                getSensorData({scene_id:items.id });
            },
            showAllscene: function () {
                var that = this
                that.tableItemsb = JSON.parse(JSON.stringify(that.tableItems))
                that.sceneid = null
                that.initPage();
                that.mapItems(that.tableItems)
            },
            //报警记录详情
            loadWarning: function (item) {
                var that = this
                that.warningQuery.scene_id = item.id
                that.warningPaged = 1
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                that.warningTime = [start, end]
                that.warningLevel = 0
                that.getWarning()
                that.showWarning = true
            },
            loadHistory: function (item) {
                var that = this
                that.historyQuery.scene_id = item.id
                that.historyPaged = 1
                var end = new Date();
                var start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
                that.historyTime = [start, end]
                that.historyQuery.sensor_id = '' 
                that.getNodeSensor(item.id)
                that.getHistory();
                that.showHistory = true
            }

        },
        computed: function () {

        },

        created: function () {
            var that = this
            that.getLeve()

            //取时间
            Date.prototype.format = function (format) {
                var o = {
                    "M+": this.getMonth() + 1, // month
                    "d+": this.getDate(), // day
                    "h+": this.getHours(), // hour
                    "m+": this.getMinutes(), // minute
                    "s+": this.getSeconds(), // second
                    "q+": Math.floor((this.getMonth() + 3) / 3), // quarter
                    "S": this.getMilliseconds()
                    // millisecond
                }
                if (/(y+)/.test(format))
                    format = format.replace(RegExp.$1, (this.getFullYear() + "")
                        .substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(format))
                        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
                            : ("00" + o[k]).substr(("" + o[k]).length));
                return format;
            }
            var begin = new Date();
            var end = new Date();
            new Date(begin.setMonth((new Date().getMonth() - 1)));
            that.begintime = begin.Format("yyyy-MM-dd hh:mm:ss");
            that.begintimea = begin.Format("yyyy-MM-dd");
            that.endtime = end.Format("yyyy-MM-dd hh:mm:ss");
            that.endtimea = end.Format("yyyy-MM-dd");

            window.onresize = function () {
                echarts.init(document.getElementById('leftOneBox')).resize();
                echarts.init(document.getElementById('leftTwoBox')).resize();
                echarts.init(document.getElementById('middenTopBox')).resize();
                echarts.init(document.getElementById('rightOneBox')).resize();
                echarts.init(document.getElementById('rightThreeBox')).resize();
            }
            that.getNowDate();
            that.middenButtonItems();
           // that.usersItems();


        },
        mounted: function () {
            var that = this;
            setInterval(function () {
                that.getNowDate();
            }, 1000);


        },
        watch: {},

    })
</script>

</html>